<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="show" :width="width+'%'" @close="handleClose">
      <slot />
      <span v-if="reveal" slot="footer" class="dialog-footer">
        <el-button class="submitButton" type="primary" :disabled="disabled" :loading="loading" @click="handleSubmit">{{ buttonText || '提交' }}</el-button>
        <el-button class="submitButtons" type="primary" :disabled="disabled" :loading="loading" @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import "./dialog.scss";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    reveal: {
      type: Boolean,
      default: true,
    },
    buttonText: {
      type: String,
      default: "",
    },
    width: {
      type: Number,
      default: 55,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    };
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        // console.log(val)
        this.$emit('update:visible', val); // visible 改变的时候通知父组件
      },
    },
  },
  methods: {
    handleSubmit() {
      this.$emit('confirm');
    },
    handleClose() {
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
